<template>
    <div class="container">
        <template v-if="commentList.length">
            <!-- 顶部 -->
            <div class="top">评论 {{commentList.length}}条留言</div>
            <!-- 评论内容 -->
            <div class="content" v-for="item in treeCommentList" :key="item.id">
                <div class="main">
                    <!-- 评论 -->
                    <div class="comment" >
                        <div class="info">
                            <div class="user-info">
                                <!-- 头像 -->
                                <el-avatar shape="square" :size="40" :src="ENV_VITE_APP_URL+item.fromAvatar" />
                                <!-- 用户昵称 -->
                                <div class="nickname">{{ item.fromNickname }}</div>
                                <!-- 评论时间 -->
                                <div class="time">{{ formatTimeToStr(item.createdAt) }}</div>
                            </div>
                            <div class="reply-btn" :class="{'reply-btn-active':activeId == item.id}" @click="toReplyClick(item)">{{ item.child ? item.child.length : '' }} 回复</div>
                        </div>
                        <!-- 评论内容 -->
                        <div class="text">{{ item.content }}</div>
                        <Comment
                        :visible="activeId == item.id"
                        :commentType="commentType"
                        :submitInfo="item"
                        :commentTitle="'回复'" 
                        :textareaPlaceholder="textareaPlaceholder"
                        @commentSubmit="commentSubmit"
                        :showCloseButton="true"
                        @closeButton="closeButton"
                        :class="{'comment-active':activeId == item.id}">
                        </Comment>
                    </div>
                    <!-- 回复列表 -->
                    <template v-if="item.child">
                        <div class="reply" v-for="childItem in item.child" :key="childItem.id">
                            <div class="info">
                                <div class="user-info">
                                    <!-- 头像 -->
                                    <el-avatar shape="square" :size="40" :src="ENV_VITE_APP_URL+childItem.fromAvatar" />
                                    <!-- 用户昵称 -->
                                    <div class="nickname">{{ childItem.fromNickname }}</div>
                                    <!-- 评论时间 -->
                                    <div class="time">{{ formatTimeToStr(childItem.createdAt) }}</div>
                                </div>
                                <div class="reply-btn" :class="{'reply-btn-active':activeId == childItem.id}" @click="toReplyClick(childItem)">回复</div>
                            </div>
                            <!-- 评论内容 -->
                            <div class="text">
                                <span v-if="childItem.toId == item.id">{{ childItem.content }}</span>
                                <span class="text-toComment" v-else>
                                    <i>@</i>
                                    <span class="nickname">{{ childItem.toNickname }}</span>
                                    <span>{{ '：'+childItem.content }}</span>
                                </span>
                            </div>
                            <Comment
                            :visible="activeId == childItem.id"
                            :commentType="commentType"
                            :submitInfo="childItem"
                            :commentTitle="'回复'" 
                            :textareaPlaceholder="textareaPlaceholder"
                            @commentSubmit="commentSubmit"
                            :showCloseButton="true"
                            @closeButton="closeButton"
                            :class="{'comment-active':activeId == childItem.id}">
                            </Comment>
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <div v-else class="top nodata">快来抢沙发!</div>
        <!-- 分页 -->
        <Pagination
        :currentPage="offset" 
        :pageSize="limit"
        :count="count"
        :isShow="isShow"
        @currentChange="currentChange"></Pagination>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import Comment from '@/components/system/comment/comment.vue';
import Pagination from '@/components/system/pagination/pagination.vue';
import { setTreeData } from '@/utils/tools-util';
import { formatTimeToStr } from '@/utils/date-util';
import { ENV_VITE_APP_URL } from '@/constants/common-const';

// ========================= 接收值 =========================
const props = defineProps({
    // 评论数据
    commentList: {
        type: Array,
        default: ()=>[]
    },
    // 评论类别
    commentType: {
        type: Number,
        default: 0
    },
    // 分页 - 每页数量
    offset: {
        type: Number,
        default: 30
    },
    // 分页 - 页码
    limit: {
        type: Number,
        default: 1
    },
    // 分页 - 数据总数
    count: {
        type: Number,
        default: 0
    },
    // 分页 - 显示控制
    isShow: {
        type: Boolean,
        default: false
    }
});

// ========================= 计算属性 =========================
const treeCommentList = computed(() => setTreeData(props.commentList, 'id', 'parentId', 'child'));


// ========================= 向父组件传递 =========================
const emit = defineEmits();
// 提交
function commentSubmit() {
    emit('commentSubmit');
};
// 分页
function currentChange(value) {
    emit('currentChange', value);
};

// ========================= 回复弹框操作 =========================
let textareaPlaceholder = ref('');          // 当前所需要回复的标题
let activeId = ref('');                     // 当前id
function toReplyClick(item) {
    activeId.value = item.id;
    textareaPlaceholder.value = '@'+item.fromNickname;
};

// 关闭
function closeButton(value) {
    activeId.value = '';
};
</script>

<style lang="scss" scoped>
    @import './comment-list.scss';
</style>